<template>
    <div>
        <el-button type="primary" @click="router.back()">返回主页</el-button>
    </div>
    <div>
        欢迎您
    </div>
    <div>
        {{ a }}{{ b }}
    </div>
    <div>
        {{ data.a }}
        {{ data.b }}
    </div>
    <div>
        <input v-model="data.a"/>
    </div>
    <div>
        <span v-if="data.name==='悟空'" style="color:red;">悟空</span>
        <span v-if="data.name==='杨戬'" style="color:hotpink">杨戬</span>
        <span v-else style="color:green;">哪吒</span>
    </div>
    <div style="display:flex;">
        <div @click="show(item)" v-for="item in data.books" :key="item" style="background-color:lightblue;width:200px;height:50px;margin-right:20px;color:black;">
            {{ item }}
        </div>
        <select style="width:200px">
            <option v-for="item in data.books" :key="item">{{ item }}</option>
        </select>
    </div>
    <div>
        <button @click="handler()">加油</button>
    </div>
    <div>
        <div :style="data.box">

        </div>
        <img :src="data.img">
    </div>
    <br>
    <div style="margin-left:30px;">
        <el-button @click="defaultHandler()" :style="{color:'red'}">Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success" circle>Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning" size="large">Warning</el-button>
        <el-button type="danger" :icon="Delete">Danger</el-button>
    </div>
    <div>
        <el-icon size="20px">
            <Edit />
        </el-icon>
        <el-icon size="20px">
            <View />
        </el-icon>
        <el-input v-model="data.a" style="width:240px" placeholder="测试" :prefix-icon="Search"/>
    </div>
</template>
<script setup>
import {reactive,ref,onMounted} from "vue"
import {Delete,Search} from '@element-plus/icons-vue'
import router from "@/router"

const a=ref(1)
const b=ref("学习学习")

const data = reactive({
    a:1232323,
    b:"不要啦",
    name:"杨戬",
    books: ['红楼梦','三国演义','水浒传','西游记'],
    box:{
        width: '200px',
        height: '100px',
        backgroundColor:'blue'
    },
    img:'https://www.runoob.com/wp-content/uploads/2017/01/vue.png'
})
const handler = ()=>alert("好运加一")
const show = (value)=>alert(value)
onMounted(()=>console.log("页面加载完成"))
const defaultHandler = ()=>{
    alert("default")
}
</script>